<template>
    <div class="storeInfo">
        <div class="head">    
            <el-form :model="form" class="headForm">
                <el-form-item style="width:230px">
                    <el-date-picker
                        v-model="timerange"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                
                <Searchstore searchStoreId="" v-on:select_store_id="getselect_store_id"></Searchstore>
                <el-form-item label="">
                    <el-input v-model="form.keyword" placeholder="公司名称/姓名/手机号"></el-input>
                </el-form-item>

                <el-form-item label="">
                    <el-select clearable v-model="form.type" placeholder="拜访类型">
                        <el-option v-for="item in calltype" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-select clearable v-model="form.status" placeholder="全部状态">
                        <el-option v-for="item in calltype" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>


                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
                <el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
                <el-button type="primary" plain icon="el-icon-upload2" @click="toLead">导入</el-button>
                <el-button type="primary" plain icon="el-icon-plus" @click="add">添加</el-button>
            </el-form>      
        </div>
         
        <!-- tab部分 -->
        <div class="tabContainer">
            <el-table :data="tableData" stripe style="width: 100%;text-align:center">
                <!-- 公司	拜访方式	地址	姓名	职务	联系方式	来源门店	状态	拜访日期	操作 -->
                <el-table-column prop="company_name" label="公司" fixed></el-table-column>
                <el-table-column prop="type_cn" label="拜访方式"></el-table-column>
                <el-table-column prop="company_address" label="地址" width="360"></el-table-column>
                <el-table-column prop="nickname" label="姓名"></el-table-column>                
                <el-table-column prop="duties" label="职务"> </el-table-column>
                <el-table-column prop="mobile" label="联系方式"></el-table-column>
                <el-table-column prop="store_name" label="来源门店"></el-table-column>
                <el-table-column prop="status_cn" label="状态"> </el-table-column>
                <el-table-column prop="stage" label="拜访日期"></el-table-column>
                <el-table-column  label="操作" prop="price_id" v-if="limitList.length>0">
                    <template  slot-scope="scope">            
                        <span v-for="(item,indexLimit) in limitList" :key="indexLimit" class="lightFont" @click="theClick(item.url,scope.row)">
                            <i>{{item.name}}</i><i v-if="indexLimit != limitList.length-1">&nbsp;|&nbsp;</i>
                        </span>
                    </template>

                </el-table-column>
                <el-table-column label="操作"  v-else>/</el-table-column>

            </el-table>                       
        </div>
        <!-- 分页部分 -->
        <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            @current-change="changePage"
            :page-size="size"
            :current-page.sync="pageNum"
            :hide-on-single-page=true
            :total="total">{{total}}
        </el-pagination>
        <!-- 导入弹框 -->
        <el-dialog title="导入" :visible.sync="inshow" class="business">
            <div class="dwonUpload">
                <el-upload
                    class="upload-demo"
                    name="excel"
                    :action="fileUrl"
                    accept=".xlsx"
                    :limit="1"
                    :on-change="uploadFile">
                    <el-button size="small" type="primary">点击上传</el-button>
                    
                    <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过500kb</div>
                </el-upload>
                <a size="small" type="success" href='https:/img.meiktv.com/template/team_building_template.xlsx' class="el-button downModel el-button--success el-button--small">下载模板</a>    
            </div>
        </el-dialog>
        <!-- 添加或编辑弹框 -->
        <el-dialog :title="addeditTXT" :visible.sync="AE" class="business">
            <el-form :model="AEform">
                <Searchstore :searchStoreId="s_store_name" v-on:select_store_id="getselect_store_id_edit" haswidth='107px' labaltxt="门店来源"></Searchstore>
                <el-form-item label="公司名称" label-width="107px"  class="itemTxt">
                    <el-input v-model="AEform.company_name" autocomplete="off" class="longInput"></el-input>
                </el-form-item>
                <el-form-item label="地址" label-width="107px"  class="itemTxt">
                    <el-input v-model="AEform.company_address" autocomplete="off" class="longInput"></el-input>
                </el-form-item>
                <el-form-item label="姓名" label-width="107px"  class="itemTxt">
                    <el-input v-model="AEform.nickname" autocomplete="off" class="longInput"></el-input>
                </el-form-item>
                <el-form-item label="职务" label-width="107px"  class="itemTxt">
                    <el-input v-model="AEform.duties" autocomplete="off" class="longInput"></el-input>
                </el-form-item>
                <el-form-item label="联系方式" label-width="107px"  class="itemTxt">
                    <el-input v-model="AEform.mobile" autocomplete="off" class="longInput"></el-input>
                </el-form-item>
                <el-form-item label="合作方式" label-width="107px"  class="itemTxt">
                    <el-input v-model="AEform.cooperation_mode" autocomplete="off" class="longInput"></el-input>
                </el-form-item>
                <el-form-item label="可用状态">
                    <el-radio-group v-model="AEform.status">  
                    <el-radio label="1" value="1">正常</el-radio>
                    <el-radio label="2" value="2">无效</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="拜访日期" label-width="107px"  class="itemTxt">                    
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="AEform.stage" style="width: 100%;"></el-date-picker>  
                </el-form-item>
                <el-form-item label="类型"> 
                    <el-select clearable v-model="AEform.type" placeholder="类型">
                        <el-option v-for="item in calltype" :key="item.status" :label="item.status_cn" :value="item.status"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="AE = false">取 消</el-button>
                <el-button type="primary" @click="AEconfirm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style lang="scss">
.el-table .cell{text-align: left}
</style>
<style lang="scss" scoped>

.dwonUpload{
    position: relative;
    padding-bottom:30px;
    padding-left:40px;
    .downModel{
        background: #67c23a;
        color:#fff;
        position: absolute;
        left: 140px;
        top: 0
    }
}
</style>
<script>
import { abc } from "../../../../js/abc.js";
import {potUrl} from '../../../../js/config_url.js'; 
// import {draggable} from 'vuedraggable';
import Searchstore from "../../pop/searchStore.vue"
let importUrl = abc.hostUrl+potUrl.teamimport+abc.getSession('params')



export default {
    components:{
        Searchstore
    },
    data(){
        return {          
            tableData:[],
            total:50,
            size:20,
            pageNum:1,
            form:{
                size:20,
                page:'1'

            },
            
            limitList:[
                {url:"edit",name:'编辑'},
                {url:"del",name:'删除'}
            ],
            alltype:[
                {status:"1",status_cn:"正常"},
                {status:"2",status_cn:"无效"},
            ],
            calltype:[
                {status:'0',status_cn:'公司'},
                {status:'1',status_cn:'异业'},
            ],
            timerange:[],
            
            //导入变量
            inshow:false,
            fileUrl:importUrl,
            fileName:"",
            addeditTXT:"添加",
            AE:false,
            AEform:{},
            s_store_name:'',
            
            
        }
    },
    mounted(){
        var that = this;
        that.getList()
    },
    created(){
        var that = this;
        setTimeout(() => {
            var str = $('.router-link-active').attr('href');
            abc.limit(that,str)// 权限 
            console.log(that.limitList)  
        }, 500)         
    },
    
    methods:{
        search(){
            const that = this;
            if(that.timerange.length == 0){
                that.timerange = ['','']
            }
            that.form.start_time = that.timerange[0];
            that.form.end_time = that.timerange[1];
            that.getList()
        },
        theClick(url,a){
            var that = this;
            if(url == 'edit'){
                that.addeditTXT = '编辑';
                
                abc.get(that,potUrl.teaminfo,{building_id:a.building_id},(res)=>{
                    that.AE = true;
                    that.AEform = res.data;
                    that.s_store_name = res.data.store_name;
                    that.AEform.building_id = a.building_id;                  
                })
            } else if(url == 'del'){
                abc.twoTips(that,potUrl.teamdel,'确认要删除姓名为“'+a.nickname+'”的数据吗？',{building_id:a.building_id},()=>{
                    that.getList()
                })
            }        
        },           
        changePage(val){
            var that = this;
            console.log(that.form)
            that.pageNum = val;
            that.form.page = val;
            that.getList()
        },
        reset(){
            this.timerange = ['','']
            this.form.start_time = '';
            this.form.end_time = '';
            this.form.keyword = '';
            this.form.status = '';
            this.form.type = '';
            this.form.select_store_id = '';
            this.getList()
        },
        toLead(){
            this.inshow = true;
        },
        add(){
            let that = this;
            that.AE = true;
            that.addeditTXT = '添加';            
            that.s_store_name = '';
            that.AEform = {};
        },
        
        
        getList(){
            let that = this;
            abc.get(that,potUrl.teamlist,that.form,(res)=>{
                that.total = res.data.total
                that.tableData =  res.data.list
            });//列表
        },
        uploadFile(file) {
            // console.log(file)
        },
        AEconfirm(){
            let that = this,url="";
            if(that.addeditTXT=='添加'){
                url = potUrl.teamadd
            }else{
                url = potUrl.teamedit
            }
            abc.post(that,url,that.AEform,(res)=>{
                that.AE = false
                that.getList()
            })
        },
        getselect_store_id(data){
            let that = this;
            that.form.select_store_id = data
        },
        getselect_store_id_edit(data){
            let that = this;
            that.AEform.store_id = data;
        }


    }
}

</script>